<template>
    <!-- 首页 -->
    <div class="index">
        <div class="index-top">
            <div class="top-left">
                <ul>
                    <li class="price-box">
                        <img src="@/assets/image/index/icon1.png" alt=""/>
                        <p class="num">67</p>
                        <p class="title">实单询价</p>
                    </li>
                    <li class="price-box pic2">
                        <img src="@/assets/image/index/icon2.png" alt=""/>
                        <p class="num">200</p>
                        <p class="title">普通询价</p>
                    </li>
                    <li class="price-box pic3">
                        <img src="@/assets/image/index/icon3.png" alt=""/>
                        <p class="num">13</p>
                        <p class="title">BOM询价</p>
                    </li>
                    <li class="price-box pic4">
                        <img src="@/assets/image/index/icon4.png" alt=""/>
                        <p class="num">67</p>
                        <p class="title">议价中</p>
                    </li>
                    <li class="price-box pic5">
                        <img src="@/assets/image/index/icon5.png" alt=""/>
                        <p class="num">67</p>
                        <p class="title">待发货</p>
                    </li>
                    <li class="price-box pic6">
                        <img src="@/assets/image/index/icon6.png" alt=""/>
                        <p class="num">67</p>
                        <p class="title">待付款</p>
                    </li>
                    <li class="price-box pic7">
                        <img src="@/assets/image/index/icon7.png" alt=""/>
                        <p class="num">67</p>
                        <p class="title">待开发票</p>
                    </li>
                </ul>
            </div>
            <div class="top-right">
                <div class="right-left">
                    <img src="@/assets/image/index/person.png" alt=""/>
                    <p class="tit">我的服务顾问</p>
                </div>
                <div class="right">
                    <p>
                        <span class="name">顾问：</span>
                        <span>Hilda Todd</span>
                    </p>
                    <p>
                        <span class="name">电话：</span>
                        <span>010-76130000</span>
                    </p>
                    <p>
                        <span class="name">手机：</span>
                        <span>13956249320</span>
                    </p>
                    <p>
                        <span class="name">邮箱：</span>
                        <span>iboekaic@b1b.com</span>
                    </p>
                </div>
                <img class="commun" src="@/assets/image/index/com-icon.png" alt=""/>
            </div>
        </div>
        <div class="index-bottom">
            <div class="bot-left">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="新品推荐" name="1">
                        <el-table
                        :data="tableData"
                        :header-cell-style="headerClass"
                        class="table">
                            <el-table-column
                                prop="date"
                                label="产品型号"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="品牌"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="批次">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="交货地"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="市场热度"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="操作"
                                width="180">
                                <template>
                                 
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="询价统计" name="2">
                        <div class="inquiry-box">
                            <div class="header">
                                <h3>询价成功率（按月统计）</h3>
                            </div>
                            <div class="body"
                                v-loading="loading2">
                                <div class="form"
                                    id="form1">
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="订单统计" name="3">
                        <div class="inquiry-box">
                            <div class="header">
                                <h3>订单统计（按月统计）</h3>
                            </div>
                            <div class="body"
                                v-loading="loading3">
                                <div class="form"
                                    id="form2">
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="bot-right">
                <div class="bot-head">
                    <img src="@/assets/image/index/Collection.png" alt=""/>
                    <p>我的收藏</p>
                </div>
                <div class="bot-content">
                    <ul>
                        <li>
                            <div class="decline">
                                <img src="@/assets/image/index/decline.png" alt=""/>
                                <span>15个降价</span>
                            </div>
                            <p class="num">545</p>
                            <p class="collect">型号收藏</p>
                            <!-- <div class="rise">
                                <img src="@/assets/image/index/rise.png" alt=""/>
                                <span>15个降价</span>
                            </div> -->
                        </li>
                        <li>
                            <div class="rise">
                                <img src="@/assets/image/index/rise.png" alt=""/>
                                <span>15个降价</span>
                            </div>
                            <p class="num numcolor">545</p>
                            <p class="collect brandcolor">品牌收藏</p>
                            <!-- <div class="decline">
                                <img src="@/assets/image/index/decline.png" alt=""/>
                                <span>15个降价</span>
                            </div> -->
                        </li>
                    </ul>
                </div>
                <div class="bot-header">
                    <div class="left">
                        <img class="icon" src="@/assets/image/index/purchase.png" alt=""/>
                        <p>常购清单</p>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <i class="el-icon-arrow-right icon2"></i>
                    </div>
                </div>
                <div class="bot-swpier">
                    <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide  v-for='item in page' :key='item.id'>
                            <div v-for="page in item" :key="page.id"  class="icons-item">
                                <img :src="page.img" alt="" class="lunbotu"/>
                                   <p>{{ page.tit }}</p>
                            </div>
                        </swiper-slide>
                        <!-- 分页器 -->
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
   import { Swiper, SwiperSlide } from "vue-awesome-swiper";
    // 导入swiper的样式
    import 'swiper/swiper-bundle.css'
    import * as Echart from 'echarts';
    export default{
        components: {
            Swiper,
            SwiperSlide
        },
        data(){
            return{
                activeName:'1',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                swiperOption:{
                    loop:true,
                    speed: 1000,   //滑动速度
                    pagination: {
                        //指定分页器的容器
                        el: ".swiper-pagination",
                        //点击分页器的指示点分页器会控制Swiper切换
                        clickable: true,
                    },
                },
                swiperList:[
                   {
                    id:1,
                    img:'https://img.yzcdn.cn/vant/apple-3.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:2,
                    img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:3,
                    img:'https://img.yzcdn.cn/vant/apple-1.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:4,
                    img:'https://img.yzcdn.cn/vant/apple-3.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:5,
                    img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:6,
                    img:'https://img.yzcdn.cn/vant/apple-1.jpg',
                    tit:'STM811SW16F',
                   },
                   {
                    id:7,
                    img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                    tit:'STM811SW16F7',
                   },    
                ],
                loading2: true,
                loading3: true,
            }
        },
        computed:{
            page(){
                let pages = [];
                this.swiperList.forEach((item,index)=>{
                    let idx = Math.floor(index/6)
                    if(!pages[idx]) pages[idx] =[];
                    pages[idx].push(item)
                })
                return pages
            }
        },
        created(){
            // this.page();
        },
        methods:{
            handleClick(tab, event){},
            headerClass(){
                return 'background: rgba(0, 0, 0, 0.04);color: #000000;font-size: 16px;'
            },
            // 渲染询价表格
            handleChart1(){
                var chartDom = document.getElementById('form1');
                let dataObj = {
                    d1: [14, 33, 22, 213, 123, 112, 212, 1, 2, 3, 255, 99],
                    d2: [53, 11, 22, 63, 33, 97, 75, 69, 65, 77, 112, 101],
                    d3: [13, 55, 31, 6, 55, 21, 55, 11, 122, 213, 52, 98],
                };
                if (chartDom) {
                    var myChart = Echart.init(chartDom);
                    var option;
                    option = {
                        grid: {
                            top: 40,
                            bottom: 35,
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999',
                                },
                            },
                        },

                        legend: {
                            bottom: 5,
                            data: ['询价数', '收到报价数', '生成报价单数'],
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisPointer: {
                                    type: 'shadow',
                                },
                                data: [
                                    '1月',
                                    '2月',
                                    '3月',
                                    '4月',
                                    '5月',
                                    '6月',
                                    '7月',
                                    '8月',
                                    '9月',
                                    '10月',
                                    '11月',
                                    '12月',
                                ],
                            },
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量（个）',
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    formatter: '{value} ',
                                },
                            },
                        ],
                        series: [
                            {
                                name: '询价数',
                                yAxisIndex: 0,
                                type: 'bar',

                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#3a7bd9',
                                },
                                barWidth: 15,
                                data: dataObj.d1,
                            },
                            {
                                name: '收到报价数',
                                yAxisIndex: 0,
                                type: 'bar',

                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#31b76d',
                                },
                                barWidth: 15,
                                data: dataObj.d2,
                            },
                            {
                                name: '生成报价单数',
                                yAxisIndex: 0,
                                type: 'bar',

                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#dcc921',
                                },
                                barWidth: 15,
                                data: dataObj.d3,
                            },
                        ],
                    };
                    setTimeout(() => {
                        this.loading2 = false;
                        option && myChart.setOption(option);
                    }, 1000);
                }
            },
            handleChart2() {
                var chartDom = document.getElementById('form2');
                let dataObj = {
                    d1: [14, 33, 22, 213, 123, 112, 212, 1, 2, 3, 255, 99],
                    d2: [53, 11, 22, 63, 33, 97, 75, 69, 65, 77, 112, 101],
                    d3: [13, 55, 31, 6, 55, 21, 55, 11, 122, 213, 52, 98],
                };
                if (chartDom) {
                    var myChart = Echart.init(chartDom);
                    var option;
                    option = {
                        grid: {
                            top: 40,
                            bottom: 35,
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999',
                                },
                            },
                        },
                        legend: {
                            bottom: -5,
                            data: ['实单', '普通', 'BOM'],
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisPointer: {
                                    type: 'shadow',
                                },
                                data: [
                                    '1月',
                                    '2月',
                                    '3月',
                                    '4月',
                                    '5月',
                                    '6月',
                                    '7月',
                                    '8月',
                                    '9月',
                                    '10月',
                                    '11月',
                                    '12月',
                                ],
                            },
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量（个）',
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    formatter: '{value} ',
                                },
                            },
                        ],
                        series: [
                            {
                                name: '实单',
                                yAxisIndex: 0,
                                type: 'line',
                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#3a7bd9',
                                },
                                data: dataObj.d1,
                            },
                            {
                                name: '普通',
                                yAxisIndex: 0,
                                type: 'line',
                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#31b76d',
                                },

                                data: dataObj.d2,
                            },
                            {
                                name: 'BOM',
                                yAxisIndex: 0,
                                type: 'line',
                                emphasis: {
                                    focus: 'series',
                                },
                                itemStyle: {
                                    color: '#dcc921',
                                },
                                data: dataObj.d3,
                            },
                        ],
                    };

                    setTimeout(() => {
                        this.loading3 = false;
                        option && myChart.setOption(option);
                    }, 1000);
                }
            },
        },
        mounted(){
            this.handleChart1();
            this. handleChart2();
        }
    }
</script>
<style lang="scss" scoped>
.index{
    box-sizing: border-box;
    .index-top{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .top-left{
            width: 1080px;
            background: #FFFFFF;
            border-radius: 11px;
            padding: 25px 25px 35px;
            box-sizing: border-box;
            ul{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .price-box{
                    flex: 1;
                    height: 150px;
                    padding:15px 10px 0;
                    background-image: url('./../../assets/image/index/square1.png');
                    background-size: 100% 100%;
                    font-size: 19px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 32px;
                    text-align: center;
                    margin-right: 13px;
                    &:last-child{
                        margin-right: 0;
                    }
                    img{
                        width: 40px;
                        height: 40px;
                        display: block;
                    }
                    .num{
                        font-size: 24px;
                        font-weight: 600;
                        color: #FFFFFF;
                        line-height: 48px;
                        text-align: center;
                    }
                }
                .pic2{
                    background-image: url('./../../assets/image/index/square2.png');
                }
                .pic3{
                    background-image: url('./../../assets/image/index/square3.png');
                }
                .pic4{
                    background-image: url('./../../assets/image/index/square4.png');
                } 
                .pic5{
                    background-image: url('./../../assets/image/index/square5.png');
                }
                .pic6{
                    background-image: url('./../../assets/image/index/square6.png');
                }
                .pic7{
                    background-image: url('./../../assets/image/index/square7.png');
                }

            }
          
        }
        .top-right{
            width: 499px;
            background-image: url('./../../assets/image/index/topbg.png');
            background-size: 100% 100%;
            padding: 25px 20px;
            display: flex;
            position: relative;
            box-sizing: border-box;
            .right-left{
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                line-height: 23px;
                text-align: center;
                border-right: 1px solid #D0E1FF;
                img{
                    height: 129px;
                    display: block;
                    margin: 0 25px 13px 0;
                }
            }
            .right{
                padding: 13px 0 0 15px;
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                line-height: 23px;
                .name{
                    font-size: 16px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 23px;
                }
                p{
                    margin-bottom: 17px;
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
                
            }
            .commun{
                position: absolute;
                right: 0;
                top: 18px;
            }
            
        }
    }
    .index-bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .bot-left{
            width: 67.1%;
            background: #FFFFFF;
            .table{
                width: 100%;
                padding: 20px 25px 0;
                box-sizing: border-box;
            }
            .inquiry-box{
                width: 100%;
                font-size: 16px;
                padding: 30px 25px 0;
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    h3 {
                        font-size: 24px;
                        font-weight: 400;
                        color: #000000;
                        line-height: 33px;
                    }
                }
                .body {
                    margin: 10px 5px;
                    ul {
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
                        li {
                            text-align: center;
                            width: 160px;
                            height: 48px;
                            line-height: 24px;
                            border-radius: 5px;
                            border: 1px solid #ccc;
                            background: #c4d8e9;
                            padding: 10px;
                            cursor: pointer;
                        }
                    }
                    .el-skeleton {
                        display: flex;

                        width: 100%;
                        justify-content: space-between;
                        .el-skeleton__item {
                            width: 160px;
                            height: 48px;
                            padding: 10px;
                        }
                    }

                    .form {
                        width: calc(100vw - 820px) !important;
                        height: 500px;
                    }
                }
                .blue-bg::before {
                    content: ' ';
                    width: 8px;
                    height: 20px;
                    background: #0782eb;
                    display: inline-block;
                    vertical-align: bottom;
                    margin: 0px 5px;
                }

            }
        }
        .bot-right{
            width: 500px;
            background: #FFFFFF;
            .bot-head{
                height: 57px;
                padding-left: 13px;
                display: flex;
                align-items: center;
                font-size: 19px;
                font-weight: 600;
                color: #333333;
                line-height: 21px;
                border-bottom: 1px solid #EEEEEE;
                img{
                    width: 27px;
                    height: 27px;
                    display: block;
                    margin-right: 5px;
                }
            }
            .bot-content{
                padding: 25px;
                box-sizing: border-box;
                ul{
                    display: flex;
                    justify-content: space-between;
                    li{
                        width: 213px;
                        height: 187px;
                        // padding: 20px;
                        font-size: 19px;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 24px;
                        box-sizing: border-box;
                        // position: relative;
                        .num{
                            font-size: 35px;
                            font-weight: 600;
                            color: #D37A59;
                            line-height: 78px;
                           text-align: center;
                            position: relative;
                        }
                        .numcolor{
                            color: #7A8AC8;
                        }
                        .brandcolor{
                            background: #7384C1 !important;
                        }
                        .collect{
                            width: 129px;
                            height: 43px;
                            line-height: 43px;
                            text-align: center;
                            background: #D17B57;
                            border-radius: 3px;
                            margin: auto;
                        }
                        .decline{
                            min-width: 113px;
                            // width: 96px;
                            display: inline-block;
                            margin-top: 10px;
                            // align-items: center;
                            background: #FFFFFF;
                            // border-radius: 3px;
                            font-size: 16px;
                            font-weight: 400;
                            color: #32E48E;
                            line-height: 24px;
                            padding: 7px 12px 7px 4px;
                            box-sizing: border-box;
                            border-top-right-radius: 3px;
                            clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
                            
                            img{
                                // width: 19px;
                                // height: 17px;
                                display: inline-block;
                                margin-top: -1px;
                               
                            }
                            span{
                                margin-left: -5px;
                            }
                        }
                        .rise{
                            min-width: 113px;
                            display: inline-block;
                            margin-top: 10px;
                            // align-items: center;
                            background: #FFFFFF;
                            // border-radius: 3px;
                            font-size: 16px;
                            font-weight: 400;
                            color: #FF0000;
                            line-height: 24px;
                            padding: 7px 12px 7px 4px;
                            box-sizing: border-box;
                            border-top-right-radius: 3px;
                            clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
                            
                            img{
                               
                                display: inline-block;
                                margin-top: -1px;
                               
                            }
                            span{
                                margin-left: -3px;
                            }
                        }
                    }
                }
                li:nth-child(1){
                    background-image: url("./../../assets/image/index/rightbg.png");
                    background-size: 100% 100%;
                }
                li:nth-child(2){
                    background-image: url("./../../assets/image/index/rightbg2.png");
                    background-size: 100% 100%;
                }
            }
            .bot-header{
                height: 57px;
                padding: 0 17px 0 13px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 19px;
                font-weight: 600;
                color: #333333;
                line-height: 21px;
                border-bottom: 1px solid #EEEEEE;
                .left{
                    display: flex;
                    align-items: center;
                    .icon{
                        width: 27px;
                        height: 27px;
                        display: block;
                        margin-right: 5px;
                    }

                }
                .right{
                    font-size: 19px;
                    font-weight: 400;
                    color: #999999;
                    line-height: 21px;
                    .icon2{
                       font-size: 19px; 
                       color: #999999;
                       margin-left: -7px;
                    }
                }
            }
            .bot-swpier{
                padding: 20px 25px 0;
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                p{
                    text-align: center;
                    font-size: 16px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 23px;
                }
                .lunbotu{
                    width: 100%;
                    height: 136px;
                    margin-bottom: 4px;
                }
                .icons-item{
                    width: 33%;
                    float: left;
                    margin-bottom: 20px;
                   
                }
            }
        }
    }
}

</style>